﻿<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height: 140px; border-bottom-width: 1px; padding: 10px; font-size: 14px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Toolbar/ViewDataSource" target="_blank">点击查看扩展代码</a>
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Toolbar/ViewToolbarCssSource" target="_blank">点击查看扩展样式</a>
        <br />
        js依赖项：
        <br />
        [query-1.11.0.js]、[jquery.jdirk.js]、[jquery.easyui.min.js]、[jeasyui.extensions.toolbar.js]

        <br /><br />
        css依赖项：
        <br />
        [jeasyui.extensions.toolbar.css]
    </div>
    <div data-options="region:'center',border:false,title:'此处仅显示“功能演示”选项卡所示功能基于本扩展的实现源码'" style="padding: 15px; font-size: 14px;">
        <a href="~/Demos/ExtensionDemos/Toolbar/DataDemo.rar" target="_self">下载本扩展功能演示Demo</a>
        <br />
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:20%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>width</td>
                <td>Number 类型</td>
                <td>
                    该属性表示 easyui-toolbar 控件的宽度；
                </td>
                <td>auto</td>
            </tr>
            <tr>
                <td>height</td>
                <td>Number 类型</td>
                <td>
                    表示 easyui-toolbar 控件的高度；
                </td>
                <td>auto</td>
            </tr>
            <tr>
                <td>align</td>
                <td>String 类型</td>
                <td>
                    表示 easyui-toolbar 控件的横向对齐方式，可选的值为 "left"、"center" 或 "right"；<br />
                </td>
                <td>left</td>
            </tr>
            <tr>
                <td>valign</td>
                <td>String 类型</td>
                <td>
                    表示 easyui-toolbar 控件的纵向对齐方式，可选的值为 "top"、"middle" 或 "bottom"；<br />
                </td>
                <td>middle</td>
            </tr>
            <tr>
                <td>data</td>
                <td>Array 类型</td>
                <td>
                    表示 easyui-toolbar 控件在初始时需要加载的内容数据；Array 类型，数组中的每项都表示一个待加载的工具栏子项，其可以定义为如下类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>1、jQuery-DOM 对象：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>2、HTML-DOM 对象：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>3、String 类型：可以为以下类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>a："-"、"—"、"|"，表示分割线的 separator<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>b："<" 开头和 ">" 结尾切字符串度大于等于3，表示 HTML 代码段；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>c："\\t"、"\\n"，表示换行 落阳注，无效<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>d：其他长度大于 0 的字符串，表示 label。<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>4、JSON-Object 对象：属性参考工具栏子项属性API。
                </td>
                <td>null</td>
            </tr>
            <tr>
                <td>itemTypes</td>
                <td>Json-Object 类型</td>
                <td>
                    定义 easyui-toolbar 插件能够添加的工具栏项类型；<br />
                    开发人员可以通过扩展 $.fn.toolbar.defaults.itemTypes 属性来实现其自定义的 easyui-toolbar 工具栏项类型；就像扩展 $.fn.datagrid.defaults.editors 一样；
                    已经内置的工具栏项类型有：
                    separator: 分割符<br />
                    label: 标签<br />
                    text: 文本输入框<br />
                    checkbox: 复选框<br />
                    button/linkbutton: 按钮 easyui-linkbutton<br />
                    validatebox: 验证框 easyui-validatebox<br />
                    textbox: 文本框 easyui-textbox<br />
                    numberbox: 数字框 easyui-numberbox<br />
                    numberspinner: 数字框 easyui-numberspinner<br />
                    datebox: 日期框 easyui-datebox<br />
                    datetimebox: 日期时间框 easyui-datetimebox<br />
                    timespinner: 时间框 easyui-timespinner<br />
                    combo: 下拉框 easyui-combo<br />
                    combobox: 下拉框 easyui-combobox<br />
                    combotree: 下拉树 easyui-combotree<br />
                    combogrid: 下拉列表 easyui-combogrid<br />
                    searchbox: 搜索框 easyui-searchbox<br />
                </td>
                <td>内置，请勿重写。</td>
            </tr>
            <tr>
                <td>onResize</td>
                <td>Function 类型</td>
                <td>
                    表示 easyui-toolbar 的尺寸大小重置事件；当控件大小被调整后触发；<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>width: 被设置的新的宽度；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>height: 被设置的新的告诉。<br />
                    回调函数中的 this 表示当前 easyui-toolbar 的 DOM 对象。
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onLoadSuccess</td>
                <td>Function 类型</td>
                <td>
                    表示 easyui-toolbar 的数据加载成功事件；<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>data: 加载的内容数据对象；<br />
                </td>
                <td>空</td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            方法API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width:5%;">重写</td>
                <td style="width:10%;">参数</td>
                <td>描述</td>
            </tr>
            <tr>
                <td>options</td>
                <td>否</td>
                <td>无</td>
                <td>
                    获取当前 easyui-toolbar 控件的 options 参数对象；<br />
                    返回值：返回当前 easyui-toolbar 控件的 options 参数对象，为一个 JSON-Object。
                </td>
            </tr>
            <tr>
                <td>wrapper</td>
                <td>否</td>
                <td>无</td>
                <td>
                    获取当前 easyui-toolbar 控件的工具栏包装器对象；<br />
                    返回值：返回当前 easyui-toolbar 控件的工具栏包装器对象；该方法返回一个包含 html-table 的 jQuery 对象。
                </td>
            </tr>
            <tr>
                <td>toolbar</td>
                <td>否</td>
                <td>无</td>
                <td>
                    获取当前 easyui-toolbar 控件的工具栏外框对象；<br />
                    返回值：返回当前 easyui-toolbar 控件的工具栏外框对象；该方法返回一个包含 html-div 的 jQuery 对象。
                </td>
            </tr>
            <tr>
                <td>resize</td>
                <td>否</td>
                <td>size</td>
                <td>
                    设置当前 easyui-toolbar 控件的尺寸大小；该方法的参数 size 为一个 JSON-Object，该参数定义如下属性：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>width : 表示工具栏的新宽度；如果设置为数值类型，则表示像素宽度；如果设置为 "auto"，则表示自适应最大宽度；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>height: 表示工具栏的新高度；如果设置为数值类型，则表示像素高度；如果设置为 "auto"，则表示自适应一行按钮的高度；<br />
                    返回值：返回表示当前 easyui-toolbar 控件的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>align</td>
                <td>否</td>
                <td>align</td>
                <td>
                    设置当前 easyui-toolbar 控件的工具栏项水平居中方式；该方法的参数 align 为一个 String 类型值，其可以被定义的值限定为"left"、"right"、"center"。<br />
                    返回值：返回表示当前 easyui-toolbar 控件的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>valign</td>
                <td>否</td>
                <td>valign</td>
                <td>
                    设置当前 easyui-toolbar 控件的工具栏项垂直居中方式；该方法的参数 valign 为一个 String 类型值，其可以被定义的值限定为"top"、"middle"、"bottom"。<br />
                    返回值：返回表示当前 easyui-toolbar 控件的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>getItems</td>
                <td>否</td>
                <td>无</td>
                <td>
                    获取当前 easyui-toolbar 控件的所有工具栏子项数据；<br />
                    返回值：返回表示当前 easyui-toolbar 控件的所有工具栏子项数据所构成的一个数组，数组的每个元素包含如下属性的 JSON-Object：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>actions:    表示该工具栏子项的初始化构造器；其值为 $.fn.toolbar.defaults.itemTypes 中的一个子项；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>options:    表示该工具栏子项初始化时的 options 参数数据；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target :    表示该工具栏子项包含 "toolbar-item" 样式类的元素的 jQuery-DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>type   :    表示该工具栏子项的类型，如果是自定义加载的 html-DOM 对象则为 "custom"<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>container:  表示该工具栏子项所在的 jQuery-DOM(html-td) 对象；
                </td>
            </tr>
            <tr>
                <td>enable</td>
                <td>否</td>
                <td>无</td>
                <td>
                    启用当前 easyui-toolbar 控件的所有工具栏子项；<br />
                    返回值：返回表示当前 easyui-toolbar 控件的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>enable</td>
                <td>否</td>
                <td>无</td>
                <td>
                    禁用当前 easyui-toolbar 控件的所有工具栏子项；<br />
                    返回值：返回表示当前 easyui-toolbar 控件的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>getData</td>
                <td>否</td>
                <td>无</td>
                <td>
                    获取当前 easyui-toolbar 控件加载的所有数据；仅在初始化该控件指定的 data 参数、通过 loadData 方法加载的数据和通过 url 远程加载的数据，才会被返回；<br />
                    返回值：返回一个数组对象，数组中的每一项都表示一个工具栏子项的数据格式(返回数据的格式参考 loadData 方法的参数 data 的数据格式)。
                </td>
            </tr>
            <tr>
                <td>loadData</td>
                <td>否</td>
                <td>data</td>
                <td>
                    以指定的数据重新加载当前 easyui-toolbar 控件的所有工具栏子项；该方法的参数 data 为一个数组，表示请求远程数据时发送的查询参数；数组中的每项都表示一个待加载的工具栏子项，其可以定义为如下类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>1、jQuery-DOM 对象：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>2、HTML-DOM 对象：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>3、String 类型：可以为以下类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>a："-"、"—"、"|"，表示分割线的 separator<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>b："<" 开头和 ">" 结尾切字符串度大于等于3，表示 HTML 代码段；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>c："\\t"、"\\n"，表示换行 落阳注，无效<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>d：其他长度大于 0 的字符串，表示 label。<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>4、JSON-Object 对象：属性参考工具栏子项属性API。<br />
                    返回值：返回表示当前 easyui-toolbar 控件的 jQuery 链式对象。<br />
                    备注：执行该方法会清空当前 easyui-toolbar 控件中原来的所有子项控件。
                </td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            工具栏子项属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:20%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>id</td>
                <td>String 类型</td>
                <td>
                    该属性表示工具栏子项的id；
                </td>
                <td>null</td>
            </tr>
            <tr>
                <td>name</td>
                <td>String 类型</td>
                <td>
                    该属性表示工具栏子项的name；
                </td>
                <td>null</td>
            </tr>
            <tr>
                <td>type</td>
                <td>String 类型</td>
                <td>
                    该属性表示工具栏子项的类型，可选值有：<br />
                    separator: 分割符<br />
                    label: 标签<br />
                    text: 文本输入框<br />
                    checkbox: 复选框<br />
                    button/linkbutton: 按钮 easyui-linkbutton<br />
                    validatebox: 验证框 easyui-validatebox<br />
                    textbox: 文本框 easyui-textbox<br />
                    numberbox: 数字框 easyui-numberbox<br />
                    numberspinner: 数字框 easyui-numberspinner<br />
                    datebox: 日期框 easyui-datebox<br />
                    datetimebox: 日期时间框 easyui-datetimebox<br />
                    timespinner: 时间框 easyui-timespinner<br />
                    combo: 下拉框 easyui-combo<br />
                    combobox: 下拉框 easyui-combobox<br />
                    combotree: 下拉树 easyui-combotree<br />
                    combogrid: 下拉列表 easyui-combogrid<br />
                    searchbox: 搜索框 easyui-searchbox<br />
                </td>
                <td>button</td>
            </tr>
            <tr>
                <td>width</td>
                <td>Number 类型</td>
                <td>
                    该属性表示工具栏子项容器的宽度；
                </td>
                <td>null</td>
            </tr>
            <tr>
                <td>options</td>
                <td>Json-Object 类型</td>
                <td>
                    该属性表示工具栏子项的easyui控件的options，优先级高于外层options。
                </td>
                <td>null</td>
            </tr>
            <tr>
                <td>cls</td>
                <td>String 类型</td>
                <td>
                    该属性表示工具栏子项的容器的样式名称；
                </td>
                <td>null</td>
            </tr>
            <tr>
                <td>style</td>
                <td>String 类型</td>
                <td>
                    该属性表示工具栏子项的容器的样式内容；
                </td>
                <td>null</td>
            </tr>
            <tr>
                <td>itemCls</td>
                <td>String 类型</td>
                <td>
                    该属性表示工具栏子项的样式名称；
                </td>
                <td>null</td>
            </tr>
            <tr>
                <td>itemStyle</td>
                <td>String 类型</td>
                <td>
                    该属性表示工具栏子项的样式内容；
                </td>
                <td>null</td>
            </tr>
            <tr>
                <td>align</td>
                <td>String 类型</td>
                <td>
                    该属性表示工具栏子项容器的水平对齐方式，可选的值为 "left"、"center" 或 "right"；
                </td>
                <td>null</td>
            </tr>
            <tr>
                <td>htmlAttr</td>
                <td>Json-Object 类型</td>
                <td>
                    该属性表示工具栏子项的html属性对象；
                </td>
                <td>null</td>
            </tr>
        </table>
    </div>
</div>
